<template>
  <view class="recharge">
    <view class="recharge-wrap">
      <view class="flex">
        <text>Withdraw</text>
        <text class="fl">Fee:{{info.fee}}%</text>
      </view>
      <view class="input-wrap">
         
        <input class="input-box"
               v-model="amount"
               type="number"
               placeholder="please enter amount" />
      </view>
      <view class="ye">Balance：{{info.money}}</view>
    </view>
    <view class="address-wrap">
      <view class="item">
        <view class="flex">
          <text class="content">mobile</text>
          <input type="number"
                 placeholder="please enter " v-model="userinfo.mobile"/>
        </view>
      </view>
      <view class="item">
        <view>
          <text class="content">account number</text>
          {{info.bank.cardNumber}}
        </view>
      </view>
      <view class="item">
        <view>
          <text class="content">bank name</text>
          {{info.bank.bankName}}
        </view>
      </view>
      <view class="item">
        <view>
          <text class="content">ifsc</text>
          {{info.bank.branch}}
        </view>
      </view>
    </view>
    <view class="btn" @click="handleWithDraw">submit</view>
  <uni-popup ref="popup">
	<div class="news-wrap">
		<div class="title">Payment password</div>				
		<input placeholder="please enter pay password" type="password" class="input-wrap" v-model="payword"/>				
		<div class="news-wrap-btn" @click="toWithDraw">submit</div>
	</div>
  </uni-popup>
  </view>

</template>

<script>
import fetch from '@/common/fetch.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
  data () {
    return {
      info: {},
      amount: '',
	  payword:'',
	  userinfo:{}
    };
  },
  components:{uniPopup},
  onLoad () {	
    fetch.request('/index/mobile/withdraw', '', 'POST').then(res => {
      if (res.code === 0 || res.code === '0') {
        if (!res.data.bank.id) {
          uni.showModal({
            title: 'Notice',
            content: 'You have not bound your bank card!',
            confirmText: 'Bind now',
            cancelText: 'Cancel',
            success: function (res) {
              if (res.confirm) {
                uni.navigateTo({
                  url: '/pages/withdraw/subpage/bindBankCard/index'
                })
              } else if (res.cancel) {
                uni.navigateTo({
                  url: '/pages/index/index'
                })
              }
            }
          });
        } else {
          this.info = res.data	
			   this.getUserinfo()
        }
      } else {
        uni.showToast({
          title: res.msg,
          duration: 2000,
          icon: 'none'
        });
      }
    })
  },
  methods: {
	  /**
	   * 获取用户信息
	   */
	  getUserinfo() {
	  	fetch.request('/ucenter/home', '', 'POST').then(res => {
	  		let {
	  			data
	  		} = res;
	  		this.userinfo = data;
	  	});
	  },
	handleWithDraw(){
		if(!this.amount){
			fetch.toast('please enter amount')
			return
		}
		this.$refs.popup.open()
	},
    toWithDraw () {		
      let postdata = {
        bankId: this.info.bank.id,
        amount: this.amount,
		payword:this.payword
      }
      fetch.request('/index/Ucenter/doWithdraw', postdata, 'POST').then(res => {
		  if (res.code === 0 ){
			  fetch.toast('Submitted successfully, please wait for customer service review')
		  }else{
			  fetch.toast(res.msg)
		  }
        
      })
    }
  }
};
</script>

<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}
/deep/ .uni-popup__wrapper-box{
	width:100%;
}
.news-wrap{
	width: 80%;
	margin-left: 10%;
	background: #fff;
	padding: 40rpx;
	box-sizing: border-box;
	font-size: 16px;
	.title{
		color:#000;
		padding: 20rpx 0;
	}
	.input-wrap{
		margin:40rpx 0;
	}
	.news-wrap-btn{
		color:#FFA553;
		text-align: right;
	}
}
page,
.recharge {
  width: 100%;
  min-height: 100%;
}
.address-wrap,
.recharge-wrap {
  margin: 30rpx 20rpx;
  box-sizing: border-box;
  background: #fff;
  border-radius: 20rpx;
}
.recharge-wrap {
  font-size: 16px;
  padding: 30rpx 50rpx;
  .input-wrap {
    display: flex;
    font-size: 24px;
    margin-top: 20rpx;
    border-bottom: solid 1rpx #f4f4f4;
    padding-bottom: 20rpx;
  }
  .fl {
    height: 50rpx;
    line-height: 50rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    border: solid 1rpx #F53D46;
    border-radius: 50rpx;
    font-size: 10px;
    color: #F53D46;
    margin-left: 20rpx;
  }
  .input-box {
    font-size: 24px;
    margin-left: 30rpx;
  }
  .ye {
    color: #989898;
    font-size: 14px;
    padding-top: 20rpx;
  }
}
.item {
  padding: 30rpx 50rpx;
  box-sizing: border-box;
  border-bottom: solid 1rpx #f4f4f4;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .content {
    width: 140rpx;
    display: inline-block;
    color: #8798a3;
  }
  .icon {
    width: 26rpx;
    height: 34rpx;
    vertical-align: middle;
  }
}
.btn {
  color: #fff;
  width: 710rpx;
  margin-left: 20rpx;
  margin-top: 80rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 80rpx;
  height: 80rpx;
  background: #F53D46;
}
</style>
